<template>
  <div id="app" class="wrapper">
   <img class="wrapper__img" src="./images/user.png" alt="user">
   <div class="wrapper__input">
    <input v-model="userName" class="wrapper__input__content" type="text" placeholder="请输入用户名">
   </div>
   <div class="wrapper__input">
    <input v-model="password" class="wrapper__input__content" type="password" placeholder="输入密码">
   </div>
   <div class="wrapper__loginButton" @click="Login">登陆</div>
   <div class="wrapper__register">
    <span>立即注册</span>
    <div class="seperator"></div>
    <span>忘记密码</span>
   </div>
  </div>
 </template>
 
 <script>
 export default {
  data() {
   return {
    userName: '',
    password: ''
   }
  },
  methods: {
   // onclick事件
   Login() {
    console.log(this.userName, this.password)
    if (this.userName.length > 0 && this.password.length > 0) {
     alert(`用户名: ${this.userName} 密码: ${this.password}`)
    } else {
     alert("请输入用户名密码")
    }
   }
  }
 }
 </script>
 
 <style>
 /* 引入外部样式表 */
 @import url('./assets/login.css');
 </style>